<template>
    <div class="addPage">
        <div class="Btn flex">
            <div></div>
            <div class="submit" @click="submit">确认提交</div>
        </div>
        <div class="title">基本信息</div>
        <div class="condition_1">
            <div class="flex">
                <div>预案名称</div>
                <el-input placeholder="请输入预案名称" v-model="List.预案名称" clearable />
            </div>
        </div>
        <div class="condition_2">
            <div class="flex">
                <div>预案类型</div>
                <el-input placeholder="请输入预案类型" v-model="List.预案类型" clearable disabled />
            </div>
            <div class="flex">
                <div>响应等级</div>
                <el-input placeholder="请输入响应等级" v-model="List.响应等级" clearable />
            </div>
            <div class="flex">
                <div>等级名称</div>
                <el-input placeholder="请输入等级名称" v-model="List.等级名称" clearable />
            </div>
            <div class="flex">
                <div>事故类型</div>
                <el-input placeholder="请输入事故类型" v-model="List.事故类型" clearable />
            </div>
            <div class="flex">
                <div>事故发生区域</div>
                <el-input placeholder="请输入事故发生区域" v-model="List.事故发生区域" clearable />
            </div>
            <div class="flex">
                <div>事故发生设备</div>
                <el-input placeholder="请输入事故发生设备" v-model="List.事故发生设备" clearable />
            </div>
            <div class="flex">
                <div>事故发生危害</div>
                <el-input placeholder="请输入事故发生危害" v-model="List.事故发生危害" clearable />
            </div>
            <div class="flex">
                <div>事故风险描述</div>
                <el-input placeholder="请输入事故风险描述" v-model="List.事故风险描述" clearable />
            </div>
            <div class="flex">
                <div>注意事项</div>
                <el-input placeholder="请输入注意事项" v-model="List.注意事项" clearable />
            </div>
        </div>
        <div class="Line"></div>
        <div class="title">应急组织机构及职责</div>
        <div class="responsibility flex">
            <div class="responsibility_1">
                <div class="titles">
                    发生事故后，应立即成立应急组，由工段主管或班组长上报公司应急办公室
                    并负责应急救援工作组织和指挥，应急人员由当班值岗人员组成。
                </div>
                <div class="List flex">
                    <div class="List_title">
                        生产计划处 <br />
                        总调值班电话
                    </div>
                    <div class="List_con">
                        0596-3099899/0596-3099799
                    </div>
                </div>
                <div class="List flex">
                    <div class="List_title">
                        生产计划处 <br />
                        总调电话
                    </div>
                    <div class="List_con">
                        18805970269
                    </div>
                </div>
                <div class="List flex">
                    <div class="List_titles">
                        组长
                    </div>
                    <div class="List_con">
                        工段主管
                    </div>
                </div>
                <div class="List flex">
                    <div class="List_titles">
                        副组长
                    </div>
                    <div class="List_con">
                        当班班长
                    </div>
                </div>
                <div class="List flex">
                    <div class="List_titles">
                        成员
                    </div>
                    <div class="List_con">
                        当班值岗人员
                    </div>
                </div>
                <div class="text">当发生事故时，若组长不在，则由副组长负责应急救援工作组织和指挥。</div>
            </div>
            <div class="responsibility_2">
                <div class="titles flex">
                    <div>角色</div>
                    <div>公司职务</div>
                    <div>职责</div>
                    <div>操作</div>
                </div>
                <div class="List flex" v-for="(item, index) in tableData" :key="index">
                    <div>{{ item.角色 }}</div>
                    <div>{{ item.公司职务 }}</div>
                    <div>
                        <span v-if="item.switchBtn === true"> {{ item.职责 }}</span>
                        <el-input v-else v-model="item.职责" />
                    </div>
                    <div>
                        <el-button type="text" @click="handleClick(index)">
                            {{ item.switchBtn === true ? '编辑' : '保存' }}
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="Line"></div>
        <div class="title">处置内容</div>
        <div class="on_title">事故确认报警</div>
        <div class="report">
            <div class="content">
                <div v-for="(item, index) in reportList" :key="index" class="flex">
                    <div class="content_1">{{ index + 1 }}.</div>
                    <div class="content_2" v-if="reportEdit === true">{{ item.value }}</div>
                    <div class="content_2 flex" v-else>
                        <el-input v-model="item.value" />
                        <i class="el-icon-delete" @click="changeClick('事故确认报警', '删除', index)"></i>
                    </div>
                </div>
            </div>
            <div class="Btns flex">
                <div class="edit" @click="changeClick('事故确认报警', '编辑')" v-show="reportEdit === true">编辑</div>
                <div class="btnList flex" v-show="reportEdit === false">
                    <div @click="changeClick('事故确认报警', '取消')">取消</div>
                    <div @click="changeClick('事故确认报警', '添加')">添加</div>
                    <div @click="changeClick('事故确认报警', '完成')">完成</div>
                </div>
            </div>
        </div>
        <div class="on_title">应急启动程序</div>
        <div class="report">
            <div class="content">
                <div v-for="(item, index) in programList" :key="index" class="flex">
                    <div class="content_1">{{ index + 1 }}.</div>
                    <div class="content_2" v-if="programEdit === true">{{ item.value }}</div>
                    <div class="content_2 flex" v-else>
                        <el-input v-model="item.value" />
                        <i class="el-icon-delete" @click="changeClick('应急启动程序', '删除', index)"></i>
                    </div>
                </div>
            </div>
            <div class="Btns flex">
                <div class="edit" @click="changeClick('应急启动程序', '编辑')" v-show="programEdit === true">编辑</div>
                <div class="btnList flex" v-show="programEdit === false">
                    <div @click="changeClick('应急启动程序', '取消')">取消</div>
                    <div @click="changeClick('应急启动程序', '添加')">添加</div>
                    <div @click="changeClick('应急启动程序', '完成')">完成</div>
                </div>
            </div>
        </div>
        <div class="on_title">事故处置措施</div>
        <div class="measure flex">
            <div class="measure_1">
                <div class="titles">处置措施列表</div>
                <div class="treeEdit" v-if="treeEdit === true">
                    <el-tree highlight-current :data="treeData" :props="defaultProps" accordion
                        @node-click="handleNodeClick">
                    </el-tree>
                </div>
                <div class="treeEdit" v-else>
                    <div v-for="(item, index) in treeData" :key="index">
                        <div class="treeEdit_label flex">
                            <div> {{ index + 1 }}. </div>
                            <el-input v-model="item.label" />
                            <i class="el-icon-plus" @click="changeTree(item.label, 'label', '添加', index)" />
                            <i class="el-icon-delete" @click="changeTree(item.label, 'label', '删除', index)" />
                        </div>
                        <div v-for="(items, num) in item.children" :key="num">
                            <div class="treeEdit_child flex">
                                <div> {{ (index + 1) + '-' + (num + 1) }}. </div>
                                <el-input v-model="items.label" />
                                <i class="el-icon-delete" @click="changeTree(items.label, 'child', '删除', index, num)" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="Btns ">
                    <div class="edit" @click="changeClick('事故处置措施', '编辑')" v-show="treeEdit === true">编辑</div>
                    <div class="btnList flex" v-show="treeEdit === false">
                        <div @click="changeClick('事故处置措施', '取消')">取消</div>
                        <div @click="changeClick('事故处置措施', '添加')">添加</div>
                        <div @click="changeClick('事故处置措施', '完成')">完成</div>
                    </div>
                </div>
            </div>
            <div class="measure_2">
                <div class="titles">措施内容</div>
                <div class="content">
                    <div v-for="(item, index) in treeList" :key="index" class="flex">
                        <div class="content_1">{{ index + 1 }}.</div>
                        <div class="content_2" v-if="treeEdit1 === true">{{ item.value }}</div>
                        <div class="content_2 flex" v-else>
                            <el-input v-model="item.value" />
                            <i class="el-icon-delete" @click="changeClick('事故处置措施1', '删除', index)"></i>
                        </div>
                    </div>
                </div>
                <div class="Btns flex" v-if="treeList.length > 0">
                    <div class="edit" @click="changeClick('事故处置措施1', '编辑')" v-show="treeEdit1 === true">编辑</div>
                    <div class="btnList flex" v-show="treeEdit1 === false">
                        <div @click="changeClick('事故处置措施1', '取消')">取消</div>
                        <div @click="changeClick('事故处置措施1', '添加')">添加</div>
                        <div @click="changeClick('事故处置措施1', '完成')">完成</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="on_title">处置注意事项</div>
        <div class="matter flex">
            <div class="matter_1">
                <div class="titles">措施名称列表</div>
                <div class="content">
                    <div v-for="(item, index) in matterList" :key="index" :class="current === item.措施名称 ? 'active' : ''"
                        @click="current = item.措施名称">
                        <div class="content_1">{{ index + 1 }}.</div>
                        <div class="content_2 " v-if="matterEdit === true">{{ item.措施名称 }}</div>
                        <div class="content_2 flex" v-else>
                            <el-input v-model="item.措施名称" />
                            <i class="el-icon-delete" @click="changeClick('处置注意事项', '删除', index)"></i>
                        </div>
                    </div>
                </div>
                <div class="Btns flex">
                    <div class="edit" @click="changeClick('处置注意事项', '编辑')" v-show="matterEdit === true">编辑</div>
                    <div class="btnList flex" v-show="matterEdit === false">
                        <div @click="changeClick('处置注意事项', '取消')">取消</div>
                        <div @click="changeClick('处置注意事项', '添加')">添加</div>
                        <div @click="changeClick('处置注意事项', '完成')">完成</div>
                    </div>
                </div>
            </div>
            <div class="matter_2">
                <div class="titles">措施内容</div>
                <div class="content">
                    <div v-for="(item, index) in matterData" :key="index" class="flex">
                        <div class="content_1">{{ index + 1 }}.</div>
                        <div class="content_2" v-if="matterEdit1 === true">{{ item.value }}</div>
                        <div class="content_2 flex" v-else>
                            <el-input v-model="item.value" />
                            <i class="el-icon-delete" @click="changeClick('处置注意事项1', '删除', index)"></i>
                        </div>
                    </div>
                </div>
                <div class="Btns flex">
                    <div class="edit" @click="changeClick('处置注意事项1', '编辑')" v-show="matterEdit1 === true">编辑</div>
                    <div class="btnList flex" v-show="matterEdit1 === false">
                        <div @click="changeClick('处置注意事项1', '取消')">取消</div>
                        <div @click="changeClick('处置注意事项1', '添加')">添加</div>
                        <div @click="changeClick('处置注意事项1', '完成')">完成</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import cloneDeep from 'lodash/cloneDeep';
export default {
    name: 'addPage',
    data() {
        return {
            type: "",
            List: {
                预案名称: "",
                预案类型: "现场处置方案",
                响应等级: "",
                等级名称: "",
                事故类型: "",
                事故发生区域: "",
                事故发生设备: "",
                事故发生危害: "",
                事故风险描述: "",
                注意事项: "",
            },
            oldList: {},
            tableData: [
                // { 角色: "组长", 公司职务: "工段主管", 职责: "负责现场处置方案的确定，对事故现场进行组织指挥救援。应急处置过程中，负责向应急办公室报告事故情况和应急救援进度。", switchBtn: true },
                // { 角色: "副组长", 公司职务: "当班班长", 职责: "负责协助组长进行相应指挥工作，并进行应急救援人员、 物资与装备的调配，做好当事人或周围相关人员的问讯记录。", switchBtn: true },
                // { 角色: "组员", 公司职务: "当班值岗人员", 职责: "负责对现场处置方案的落实执行，听从组长、副组长的指挥进行救援，并维持好现场秩序，发现事故隐患及时处理。", switchBtn: true },
                { 角色: "组长", 公司职务: "工段主管", 职责: "", switchBtn: true },
                { 角色: "副组长", 公司职务: "当班班长", 职责: "", switchBtn: true },
                { 角色: "组员", 公司职务: "当班值岗人员", 职责: "", switchBtn: true },
            ],
            reportEdit: true,
            reportList: [{ value: "" }],
            reportList1: [],
            programList: [{ value: "" }],
            programList1: [],
            programEdit: true,
            treeEdit: true,
            treeEdit1: true,
            treeData: [{ label: '1.' }],
            treeOldData: [{ label: '1.' }],
            treeData1: [],
            treeList: [],
            treeList1: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            matterList: [{ 措施名称: "" }],
            matterList1: [],
            matterEdit: true,
            matterEdit1: true,
            matterData: [{ value: "x" }],
            matterData1: [],
            current: ""
        }
    },
    watch: {
        current: {
            handler(val) {
                if (val) {
                    const findContentByDisposal = (disposalName) => {
                        const item = this.matterList.find(item => item.措施名称 === disposalName);
                        return item ? item.措施内容 : "未找到匹配的处置内容";
                    }
                    this.matterData = findContentByDisposal(val).split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
                }
            },
            deep: true
        },
    },
    methods: {
        async submit() {
            let URL = 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjya_xq_zsgc'
            let information = false, responsibility = false, police = false, start = false, measure = false, matter = false;

            let reportString = this.reportList.map((item, index) => `（${index + 1}）${item.value}`).join('');
            let program = this.programList.map((item, index) => `（${index + 1}）${item.value}`).join('');
            let measureData = this.treeData1.map(item =>
                `('${this.List.预案类型}','${this.List.预案名称}','事故处置措施','${item.处置内容}','${item.措施名称}','${item.措施内容}')`
            ).join(',');
            let matterData = this.matterList.map(item =>
                `('${this.List.预案类型}','${this.List.预案名称}','处置注意事项','${item.措施名称}','${item.措施内容}')`
            ).join(',');
            if (this.List.预案名称 === '') {
                this.$message({
                    message: '请输入预案名称',
                    type: 'warning'
                });
            } else {
                if (this.type === "编辑") {

                    // 基本信息
                    const optionsDel1 = {
                        method: 'POST',
                        url: URL,
                        data: {
                            TIP: 'delete',
                            SQL: `delete from imp_emergmanage.emerg_siterspmrs where PlanName = '${this.oldList.预案名称}' and PlanType = '${this.oldList.预案类型}'`
                        }
                    };
                    await axios.request(optionsDel1).then(response => {
                        if (response.data.message === "success") {
                            const optionsAdd = {
                                method: 'POST',
                                url: URL,
                                data: {
                                    TIP: 'INSERT',
                                    SQL: `INSERT INTO imp_emergmanage.emerg_siterspmrs (PlanType, PlanName, Level, LevelName, AccidentType, AccidentArea, AccidentPoint, AccidentHazard, AccidentDescr, Notes)
                                            VALUES ('${this.List.预案类型}', '${this.List.预案名称}', '${this.List.响应等级}', '${this.List.等级名称}', '${this.List.事故类型}', '${this.List.事故发生区域}', '${this.List.事故发生设备}', '${this.List.事故发生危害}', '${this.List.事故风险描述}', '${this.List.注意事项}')`
                                }
                            };
                            axios.request(optionsAdd).then(response => {
                                if (response.data.message === "success") {
                                    information = true
                                } else this.$message.error("修改失败");
                            }).catch(function (error) {
                                console.error(error);
                            });
                        }
                    }).catch(function (error) {
                        console.error(error);
                    });

                    // 应急组织机构及职责
                    const optionsDel2 = {
                        method: 'POST',
                        url: URL,
                        data: {
                            TIP: 'delete',
                            SQL: `delete from imp_emergmanage.emerg_siterspmrs_jobduty where PlanName = '${this.oldList.预案名称}' and PlanType = '${this.oldList.预案类型}'`
                        }
                    };
                    await axios.request(optionsDel2).then(response => {
                        if (response.data.message === "success") {
                            const optionsAdd = {
                                method: 'POST',
                                url: URL,
                                data: {
                                    TIP: 'INSERT',
                                    SQL: `INSERT INTO imp_emergmanage.emerg_siterspmrs_jobduty (PlanType, PlanName, Role, Title, Duty)
                                         VALUES ('${this.List.预案类型}', '${this.List.预案名称}', '组长', '工段主管', '${this.tableData[0].职责}'),('${this.List.预案类型}', '${this.List.预案名称}', '副组长', '当班班长', '${this.tableData[1].职责}'),('${this.List.预案类型}', '${this.List.预案名称}', '组员', '当班值岗人员', '${this.tableData[2].职责}')`
                                }
                            };
                            axios.request(optionsAdd).then(response => {
                                if (response.data.message === "success") {
                                    responsibility = true
                                } else this.$message.error("修改失败");
                            }).catch(function (error) {
                                console.error(error);
                            });
                        }
                    }).catch(function (error) {
                        console.error(error);
                    });

                    // 事故确认报警
                    const optionsDel3 = {
                        method: 'POST',
                        url: URL,
                        data: {
                            TIP: 'delete',
                            SQL: `delete from imp_emergmanage.emerg_siterspmrs_deal where PlanName = '${this.oldList.预案名称}' and PlanType = '${this.oldList.预案类型}' and DealCodeName = '事故确认报警'`
                        }
                    };
                    await axios.request(optionsDel3).then(response => {
                        if (response.data.message === "success") {
                            const optionsAdd = {
                                method: 'POST',
                                url: URL,
                                data: {
                                    TIP: 'INSERT',
                                    SQL: `INSERT INTO imp_emergmanage.emerg_siterspmrs_deal (PlanType, PlanName, DealCodeName, DealCodeContent) VALUES
                                    ('${this.List.预案类型}', '${this.List.预案名称}', '事故确认报警', '${reportString}')`
                                }
                            };
                            axios.request(optionsAdd).then(response => {
                                if (response.data.message === "success") {
                                    police = true
                                } else this.$message.error("修改失败");
                            }).catch(function (error) {
                                console.error(error);
                            });
                        }
                    }).catch(function (error) {
                        console.error(error);
                    });

                    // 应急启动程序
                    const optionsDel4 = {
                        method: 'POST',
                        url: URL,
                        data: {
                            TIP: 'delete',
                            SQL: `delete from imp_emergmanage.emerg_siterspmrs_deal  where PlanName = '${this.oldList.预案名称}' and PlanType = '${this.oldList.预案类型}' and DealCodeName = '应急启动程序'`
                        }
                    };
                    await axios.request(optionsDel4).then(response => {
                        if (response.data.message === "success") {
                            const optionsAdd = {
                                method: 'POST',
                                url: URL,
                                data: {
                                    TIP: 'INSERT',
                                    SQL: `INSERT INTO imp_emergmanage.emerg_siterspmrs_deal (PlanType, PlanName, DealCodeName, DealCodeContent) VALUES
                                            ('${this.List.预案类型}', '${this.List.预案名称}', '应急启动程序', '${program}')`
                                }
                            };
                            axios.request(optionsAdd).then(response => {
                                if (response.data.message === "success") {
                                    start = true
                                } else this.$message.error("修改失败");
                            }).catch(function (error) {
                                console.error(error);
                            });
                        }
                    }).catch(function (error) {
                        console.error(error);
                    });

                    // 事故处置措施
                    const optionsDel5 = {
                        method: 'POST',
                        url: URL,
                        data: {
                            TIP: 'delete',
                            SQL: `delete from imp_emergmanage.emerg_siterspmrs_deal  where PlanName = '${this.oldList.预案名称}' and PlanType = '${this.oldList.预案类型}' and DealCodeName = '事故处置措施'`
                        }
                    };
                    await axios.request(optionsDel5).then(response => {
                        if (response.data.message === "success") {
                            const optionsAdd = {
                                method: 'POST',
                                url: URL,
                                data: {
                                    TIP: 'INSERT',
                                    SQL: `INSERT INTO imp_emergmanage.emerg_siterspmrs_deal (PlanType, PlanName, DealCodeName, DealCodeContent,DealStepName, DealStepContent) VALUES ${measureData}`
                                }
                            };
                            axios.request(optionsAdd).then(response => {
                                if (response.data.message === "success") {
                                    measure = true
                                } else this.$message.error("修改失败");
                            }).catch(function (error) {
                                console.error(error);
                            });
                        }
                    }).catch(function (error) {
                        console.error(error);
                    });

                    // 处置注意事项
                    const optionsDel6 = {
                        method: 'POST',
                        url: URL,
                        data: {
                            TIP: 'delete',
                            SQL: `delete from imp_emergmanage.emerg_siterspmrs_deal where PlanName = '${this.oldList.预案名称}' and PlanType = '${this.oldList.预案类型}' and DealCodeName = '处置注意事项'`
                        }
                    };
                    await axios.request(optionsDel6).then(response => {
                        if (response.data.message === "success") {
                            const optionsAdd = {
                                method: 'POST',
                                url: URL,
                                data: {
                                    TIP: 'INSERT',
                                    SQL: `INSERT INTO imp_emergmanage.emerg_siterspmrs_deal (PlanType, PlanName, DealCodeName, DealStepName, DealStepContent) VALUES ${matterData}`
                                }
                            };
                            axios.request(optionsAdd).then(response => {
                                if (response.data.message === "success") {
                                    matter = true
                                } else this.$message.error("修改失败");
                            }).catch(function (error) {
                                console.error(error);
                            });
                        }
                    }).catch(function (error) {
                        console.error(error);
                    });

                    setTimeout(() => {
                        if (information === true && responsibility === true && police === true && start === true && measure === true && matter === true) {
                            this.$message.success("修改成功");
                            this.$router.push({ path: '/EmergencyPlan/scene' })
                        }
                    }, 500);
                } else {
                    const optionsAdd1 = {
                        method: 'POST',
                        url: URL,
                        data: {
                            TIP: 'INSERT',
                            SQL: `INSERT INTO imp_emergmanage.emerg_siterspmrs (PlanType, PlanName, Level, LevelName, AccidentType, AccidentArea, AccidentPoint, AccidentHazard, AccidentDescr, Notes)
                                            VALUES ('${this.List.预案类型}', '${this.List.预案名称}', '${this.List.响应等级}', '${this.List.等级名称}', '${this.List.事故类型}', '${this.List.事故发生区域}', '${this.List.事故发生设备}', '${this.List.事故发生危害}', '${this.List.事故风险描述}', '${this.List.注意事项}')`
                        }
                    };
                    axios.request(optionsAdd1).then(response => {
                        if (response.data.message === "success") {
                            information = true
                        } else this.$message.error("添加失败");
                    }).catch(function (error) {
                        console.error(error);
                    });
                    const optionsAdd2 = {
                        method: 'POST',
                        url: URL,
                        data: {
                            TIP: 'INSERT',
                            SQL: `INSERT INTO imp_emergmanage.emerg_siterspmrs_jobduty (PlanType, PlanName, Role, Title, Duty)
                                         VALUES ('${this.List.预案类型}', '${this.List.预案名称}', '组长', '工段主管', '${this.tableData[0].职责}'),('${this.List.预案类型}', '${this.List.预案名称}', '副组长', '当班班长', '${this.tableData[1].职责}'),('${this.List.预案类型}', '${this.List.预案名称}', '组员', '当班值岗人员', '${this.tableData[2].职责}')`
                        }
                    };
                    axios.request(optionsAdd2).then(response => {
                        if (response.data.message === "success") {
                            responsibility = true
                        } else this.$message.error("添加失败");
                    }).catch(function (error) {
                        console.error(error);
                    });
                    const optionsAdd3 = {
                        method: 'POST',
                        url: URL,
                        data: {
                            TIP: 'INSERT',
                            SQL: `INSERT INTO imp_emergmanage.emerg_siterspmrs_deal (PlanType, PlanName, DealCodeName, DealCodeContent) VALUES
                                    ('${this.List.预案类型}', '${this.List.预案名称}', '事故确认报警', '${reportString}')`
                        }
                    };
                    axios.request(optionsAdd3).then(response => {
                        if (response.data.message === "success") {
                            police = true
                        } else this.$message.error("添加失败");
                    }).catch(function (error) {
                        console.error(error);
                    });
                    const optionsAdd4 = {
                        method: 'POST',
                        url: URL,
                        data: {
                            TIP: 'INSERT',
                            SQL: `INSERT INTO imp_emergmanage.emerg_siterspmrs_deal (PlanType, PlanName, DealCodeName, DealCodeContent) VALUES
                                            ('${this.List.预案类型}', '${this.List.预案名称}', '应急启动程序', '${program}')`
                        }
                    };
                    axios.request(optionsAdd4).then(response => {
                        if (response.data.message === "success") {
                            start = true
                        } else this.$message.error("添加失败");
                    }).catch(function (error) {
                        console.error(error);
                    });
                    const optionsAdd5 = {
                        method: 'POST',
                        url: URL,
                        data: {
                            TIP: 'INSERT',
                            SQL: `INSERT INTO imp_emergmanage.emerg_siterspmrs_deal (PlanType, PlanName, DealCodeName, DealCodeContent,DealStepName, DealStepContent) VALUES ${measureData}`
                        }
                    };
                    axios.request(optionsAdd5).then(response => {
                        if (response.data.message === "success") {
                            measure = true
                        } else this.$message.error("添加失败");
                    }).catch(function (error) {
                        console.error(error);
                    });
                    const optionsAdd6 = {
                        method: 'POST',
                        url: URL,
                        data: {
                            TIP: 'INSERT',
                            SQL: `INSERT INTO imp_emergmanage.emerg_siterspmrs_deal (PlanType, PlanName, DealCodeName, DealStepName, DealStepContent) VALUES ${matterData}`
                        }
                    };
                    axios.request(optionsAdd6).then(response => {
                        if (response.data.message === "success") {
                            matter = true
                        } else this.$message.error("添加失败");
                    }).catch(function (error) {
                        console.error(error);
                    });
                    setTimeout(() => {
                        if (information === true && responsibility === true && police === true && start === true && measure === true && matter === true) {
                            this.$message.success("添加成功");
                            this.$router.push({ path: '/scene' })
                        }
                    }, 500);
                }
            }
        },
        handleNodeClick(data) {
            function findContentByLabel(arr, label) {
                // 1. 先尝试匹配措施名称
                const byMeasureName = arr.find(item => item.措施名称 === label);
                if (byMeasureName) return byMeasureName.措施内容;

                // 2. 若措施名称无匹配，再尝试匹配处置内容
                const byDisposalContent = arr.find(item => item.处置内容 === label);
                return byDisposalContent ? byDisposalContent.措施内容 : '未找到匹配项';
            }
            let result
            if (!data.children) {
                result = findContentByLabel(this.treeData1, data.label);
            }
            if (result) {
                this.treeList = result.split(/（\d+）/)
                    .filter(item => item.trim() !== '')
                    .map(item => ({ value: item.trim(), name: data.label }));
                this.treeList1 = result.split(/（\d+）/)
                    .filter(item => item.trim() !== '')
                    .map(item => ({ value: item.trim(), name: data.label }));
            }
        },
        getList(PlanName, PlanType) {
            let URL = "http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjya_xq_zsgc"
            // 应急组织机构及职责
            const YJZZJG = {
                method: 'POST',
                url: URL,
                data: {
                    TIP: 'select',
                    SQL: `select PlanName '预案名称', PlanType '预案类型', role '角色', Title '公司职位', Duty '职责' from imp_emergmanage.emerg_siterspmrs_jobduty where PlanName = '${PlanName}' and PlanType = '${PlanType}'`
                }
            }
            axios.request(YJZZJG).then(response => {
                let data = []
                if (response.data.data.length > 0) {
                    response.data.data.forEach(item => {
                        data.push(item.职责)
                    })
                    this.tableData.forEach((item, index) => {
                        if (data[index]) {
                            item.职责 = data[index];
                        }
                    });
                }
            }).catch(function (error) {
                console.error(error);
            });
            // 事故确认报警
            const SGQRBJ = {
                method: 'POST',
                url: URL,
                data: {
                    TIP: 'select',
                    SQL: `select DealCodeName '处置名称',DealCodeContent '处置内容' from imp_emergmanage.emerg_siterspmrs_deal where
                            PlanName = '${PlanName}' and PlanType = '${PlanType}' and DealCodeName = '事故确认报警'`
                }
            };
            axios.request(SGQRBJ).then(response => {
                if (response.data.data.length > 0) {
                    this.reportList = response.data.data[0].处置内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
                    this.reportList1 = response.data.data[0].处置内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
                }

            }).catch(function (error) {
                console.error(error);
            });
            // 应急启动程序
            const YJQDCX = {
                method: 'POST',
                url: URL,
                data: {
                    TIP: 'select',
                    SQL: `select DealCodeName '处置名称',DealCodeContent '处置内容' from imp_emergmanage.emerg_siterspmrs_deal where
                            PlanName = '${PlanName}' and PlanType = '${PlanType}' and DealCodeName = '应急启动程序'`
                }
            };
            axios.request(YJQDCX).then(response => {
                if (response.data.data.length > 0) {
                    this.programList = response.data.data[0].处置内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
                    this.programList1 = response.data.data[0].处置内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
                }

            }).catch(function (error) {
                console.error(error);
            });
            // 事故处置措施
            const SGCZCS = {
                method: 'POST',
                url: URL,
                data: {
                    TIP: 'select',
                    SQL: `select DealCodeName '处置名称',DealCodeContent '处置内容', DealStepName '措施名称', DealStepContent '措施内容' from imp_emergmanage.emerg_siterspmrs_deal where
                        PlanName = '${PlanName}' and PlanType = '${PlanType}' and DealCodeName = '事故处置措施' group by DealCodeName, DealCodeContent, DealStepName, DealStepContent`
                }
            };
            axios.request(SGCZCS).then(response => {
                // console.log(response.data.data);
                if (response.data.data.length > 0) {
                    this.treeData1 = response.data.data
                    // 1. 按照处置内容分组   
                    const grouped = response.data.data.reduce((acc, item) => {
                        const key = item.处置内容;
                        if (!acc[key]) {
                            acc[key] = [];
                        }
                        if (item.措施名称) {
                            acc[key].push(item.措施名称);
                        }
                        return acc;
                    }, {});

                    // 2. 转换为树形结构   
                    const treeData = Object.entries(grouped).map(([label, children]) => {
                        if (children.length > 0) {
                            return {
                                label,
                                children: children.map(child => ({ label: child }))
                            };
                        } else {
                            return { label };
                        }
                    });
                    this.treeData = treeData;
                    this.treeOldData = treeData;
                }
            }).catch(function (error) {
                console.error(error);
            });
            // 处置注意事项
            const CZZYSX = {
                method: 'POST',
                url: URL,
                data: {
                    TIP: 'select',
                    SQL: `select DealCodeName '处置名称', DealStepName '措施名称',  DealStepContent '措施内容' from imp_emergmanage.emerg_siterspmrs_deal where
                            PlanName = '${PlanName}' and PlanType = '${PlanType}' and DealCodeName = '处置注意事项' group by DealCodeName,  DealStepName, DealStepContent`
                }
            };
            axios.request(CZZYSX).then(response => {
                if (response.data.data.length > 0) {
                    let current = response.data.data[0].措施名称
                    this.matterList = response.data.data
                    this.matterList1 = JSON.parse(JSON.stringify(response.data.data))
                    this.current = current
                    this.matterData = response.data.data[0].措施内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
                    this.matterData1 = response.data.data[0].措施内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
                    // console.log(response.data.data);
                }
            }).catch(function (error) {
                console.error(error);
            });
        },
        handleClick(index) {
            this.tableData[index].switchBtn = !this.tableData[index].switchBtn;
        },
        changeClick(val, item, index) {
            let text
            let result
            if (val === "事故确认报警") {
                if (item === '编辑') this.reportEdit = false
                if (item === '取消') {
                    this.reportEdit = true
                    this.reportList = JSON.parse(JSON.stringify(this.reportList1));
                }
                if (item === '完成') {
                    this.reportEdit = true
                    this.reportList1 = JSON.parse(JSON.stringify(this.reportList));
                }
                if (item === '删除') this.reportList.splice(index, 1)
                if (item === '添加') this.reportList.push({ value: '' })
            } else if (val === "应急启动程序") {
                if (item === '编辑') this.programEdit = false
                if (item === '取消') {
                    this.programEdit = true
                    this.programList = JSON.parse(JSON.stringify(this.programList1));
                }
                if (item === '完成') {
                    this.programEdit = true
                    this.programList1 = JSON.parse(JSON.stringify(this.programList));
                }
                if (item === '完成') this.programEdit = true
                if (item === '删除') this.programList.splice(index, 1)
                if (item === '添加') this.programList.push({ value: '' })
            } else if (val === "事故处置措施") {
                if (item === '编辑') this.treeEdit = false
                if (item === '取消') {
                    this.treeEdit = true
                    this.treeData = JSON.parse(JSON.stringify(this.treeOldData));
                }
                if (item === '完成') {
                    this.treeEdit = true
                    let oldData = this.treeData1
                    let newData = JSON.parse(JSON.stringify(oldData));
                    // 遍历 list 中的每一项   
                    this.treeData.forEach(item => {
                        if (!item.children) {
                            // 如果没有 children，检查是否存在对应的处置内容（措施名称为空）
                            const exists = newData.some(
                                data => data.处置内容 === item.label && data.措施名称 === ""
                            );
                            if (!exists) {
                                newData.push({
                                    处置内容: item.label,
                                    措施名称: "",
                                    措施内容: "（1）xxxx",
                                    处置名称: "事故处置措施",
                                });
                            }
                        } else {
                            // 如果有 children，遍历每一个子项
                            item.children.forEach(child => {
                                const exists = newData.some(
                                    data => data.处置内容 === item.label && data.措施名称 === child.label
                                );
                                if (!exists) {
                                    newData.push({
                                        处置内容: item.label,
                                        措施名称: child.label,
                                        措施内容: "（1）xxxx",
                                        处置名称: "事故处置措施",
                                    });
                                }
                            });
                        }
                    });
                    this.treeData1 = newData
                    this.treeOldData = JSON.parse(JSON.stringify(this.treeData));
                }
                if (item === '添加'){
                    const oldTreeData = cloneDeep(this.treeOldData);
                    this.treeData.push({ label: '' })
                    this.treeOldData = oldTreeData;
                }
            } else if (val === "事故处置措施1") {
                if (item === '编辑') if (this.treeList.length > 0) this.treeEdit1 = false
                if (item === '取消') {
                    this.treeEdit1 = true
                    this.treeList = JSON.parse(JSON.stringify(this.treeList1));
                }
                if (item === '完成') {
                    this.treeEdit1 = true
                    let name = this.treeList[0].name
                    let oldData = this.treeData1
                    text = this.treeList.map((item, index) => `（${index + 1}）${item.value}`).join('');
                    let result = oldData.filter(item =>
                        item.处置内容.includes(name) ||
                        (item.措施名称 && item.措施名称.includes(name))
                    );
                    result[0].措施内容 = text

                    let updatedData = JSON.parse(JSON.stringify(oldData));
                    result.forEach(newItem => {
                        let foundIndex = updatedData.findIndex(oldItem =>
                            oldItem.处置内容 === newItem.处置内容 &&
                            oldItem.措施名称 === newItem.措施名称
                        );
                        if (foundIndex !== -1) {
                            updatedData[foundIndex].措施内容 = newItem.措施内容;
                        } else {
                            updatedData.push(newItem);
                        }
                    });
                    this.treeData1 = updatedData
                    this.treeList1 = JSON.parse(JSON.stringify(this.treeList));

                }
                if (item === '删除') this.treeList.splice(index, 1)
                if (item === '添加') this.treeList.push({ value: '' })
            } else if (val === "处置注意事项") {
                if (item === '编辑') this.matterEdit = false
                if (item === '取消') {
                    this.matterEdit = true
                    this.matterList = JSON.parse(JSON.stringify(this.matterList1));
                }
                if (item === '完成') {
                    this.matterEdit = true
                    this.matterList1 = JSON.parse(JSON.stringify(this.matterList));
                }
                if (item === '删除') this.matterList.splice(index, 1)
                if (item === '添加') this.matterList.push({ 措施名称: '', 措施内容: 'x' })
            } else if (val === "处置注意事项1") {
                if (item === '编辑') this.matterEdit1 = false
                if (item === '取消') {
                    this.matterEdit1 = true
                    this.matterData = JSON.parse(JSON.stringify(this.matterData1));
                }
                if (item === '完成') {
                    text = this.matterData.map((item, index) => `（${index + 1}）${item.value}`).join('');
                    let result = this.matterList.filter(item =>
                        item.措施名称 && item.措施名称.includes(this.current)
                    );
                    this.matterList = this.matterList.map(item => {
                        if (item.措施名称 === this.current) {
                            return {
                                ...item,
                                措施内容: text
                            };
                        }
                        return item;
                    });
                    this.matterEdit1 = true
                    this.matterData1 = JSON.parse(JSON.stringify(this.matterData));
                }
                if (item === '删除') this.matterData.splice(index, 1)
                if (item === '添加') this.matterData.push({ value: '' })
            }

        },
        changeTree(val, type, item, index, num) {
            if (type === 'label') {
                if (item === '删除') {
                    this.treeData1 = this.treeData1.filter(item => item.处置内容 !== val);
                    this.treeData.splice(index, 1)
                }
                if (item === '添加') {
                    if (this.treeData[index].children) {
                        this.treeData[index].children.push({ label: '' });
                    } else {
                        let newObj = {
                            label: this.treeData[index].label,
                            children: []
                        };
                        newObj.children.push({ label: "" });
                        this.$set(this.treeData, index, newObj);
                    }
                }
            } else {
                this.treeData1 = this.treeData1.filter(item => item.措施名称 !== val);
                this.treeData[index].children.splice(num, 1);
            }
        },
    },
    mounted() {
        if (this.$route.query.rowList) {
            this.List = this.$route.query.rowList;
            let list = this.$route.query.rowList;
            this.oldList = JSON.parse(JSON.stringify(list));
            this.type = this.$route.query.type;
        }
        if (this.List.预案名称) this.getList(this.List.预案名称, this.List.预案类型)
    },
}
</script>
<style lang="scss" scoped>
.addPage {
    width: 100%;
    padding: 24px 0;
    font-family: "Source Han Sans CN";
    font-style: normal;

    &>div {
        width: (1672 / 1720) * 100%;
        margin: 0 auto;
    }

    .flex {
        display: flex;
        justify-content: space-between;
    }

    .Btn {
        height: 36px;

        .submit {
            margin-right: 32px;
            width: 80px;
            height: 36px;
            line-height: 36px;
            border-radius: 4px;
            background: #165DFF;
            text-align: center;
            color: #FFF;
            font-size: 14px;
            font-weight: 700;

            &:hover {
                cursor: pointer;
            }
        }
    }

    .title {
        color: #163154;
        font-size: 20px;
        font-weight: 700;
        line-height: 22px;
        text-align: left;
    }

    .on_title {
        margin: 16px auto;
        padding-left: 24px;
        text-align: left;
        color: #678BDB;
        font-size: 19px;
        font-weight: 500;
        line-height: 28px;
    }

    .condition_1 {
        margin-top: 32px;
        height: 32px;
        line-height: 32px !important;
        color: #6A788D;
        text-align: right;
        font-size: 14px;
        font-weight: 400;

        &>div {
            width: 420px;
        }

        ::v-deep .el-input {
            width: 350px !important;
        }

        ::v-deep .el-input--medium .el-input__inner {
            height: 32px !important;
            line-height: 32px !important;
        }
    }

    .condition_2 {
        margin-top: 19px;
        width: (1608 / 1720) * 100%;
        height: 184px;
        border-radius: 1.792px;
        background: rgba(22, 93, 255, 0.05);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 21px 24px;

        &>div {
            width: 472px;
            height: 32px;
            // margin-right: 72px;
            margin-bottom: 20px;
            line-height: 32px;
            color: #6A788D;
            font-size: 14px;
            font-weight: 400;

            &>div:nth-child(1) {
                text-align: right;
                width: 84px;
            }

        }

        ::v-deep .el-input {
            width: 372px !important;
        }

        ::v-deep .el-input--medium .el-input__inner {
            height: 32px !important;
            line-height: 32px !important;
        }
    }

    .Line {
        height: 1px;
        background: #165DFF;
        margin-top: 40px;
        margin-bottom: 32px;
    }

    .responsibility {
        margin-top: 32px;
        width: (1576 / 1720) * 100%;
        height: 386px;

        .responsibility_1 {
            width: (640 / 1576) * 100%;
            height: 386px;
            border-top: 2px solid rgba(22, 93, 255, 0.50);
            border-bottom: 2px solid rgba(22, 93, 255, 0.50);

            .titles {
                height: 55.5px;
                background: rgba(22, 93, 255, 0.20);
                color: #165DFF;
                font-family: "Source Han Sans CN";
                font-size: 14.325px;
                font-style: normal;
                font-weight: 700;
                padding: 8px 83px;
                border-bottom: 1px solid rgba(22, 93, 255, 0.50);
            }

            .List {
                height: 55px;
                border-bottom: 1px solid rgba(22, 93, 255, 0.50);

                .List_title,
                .List_titles {
                    width: (140 / 640) * 100%;
                    background: rgba(22, 93, 255, 0.05);
                    border-right: 1px solid rgba(22, 93, 255, 0.50);
                    padding: 6px 24px;
                    color: #6A788D;
                    text-align: center;
                    font-size: 14.325px;
                    font-weight: 500;
                }

                .List_titles {
                    padding: 0;
                    line-height: 55px;
                }

                .List_con {
                    width: (500 / 640) * 100%;
                    color: #6A788D;
                    text-align: center;
                    font-size: 14.325px;
                    font-weight: 500;
                    line-height: 55px;
                }
            }

            .text {
                height: 55px;
                line-height: 55px;
                color: #6A788D;
                text-align: center;
                font-size: 14.325px;
                font-weight: 500;
            }
        }

        .responsibility_2 {
            width: (883 / 1576) * 100%;
            height: 386px;
            border-top: 1px solid rgba(22, 93, 255, 0.50);

            .titles {
                height: 55px;
                line-height: 55px;
                border-bottom: 0.895px solid rgba(22, 93, 255, 0.10);
                background: rgba(22, 93, 255, 0.05);
                color: #6A788D;
                font-size: 14.325px;
                font-weight: 500;

                &>div {
                    border-right: 1px solid rgba(22, 93, 255, 0.10);
                    text-align: center;
                    width: (140 / 883) * 100%;

                    &:nth-child(3) {
                        width: (540 / 883) * 100%;
                    }

                    &:nth-child(4) {
                        width: (63 / 883) * 100%;
                        border-right: none;
                    }
                }
            }

            .List {
                height: 110px;
                line-height: 55px;
                border-bottom: 0.895px solid rgba(22, 93, 255, 0.10);
                color: #6A788D;
                font-size: 14.325px;
                font-weight: 500;

                &>div {
                    border-right: 1px solid rgba(22, 93, 255, 0.10);
                    text-align: center;
                    width: (140 / 883) * 100%;
                    line-height: 110px;

                    &:nth-child(1) {
                        background: rgba(22, 93, 255, 0.05);
                    }

                    &:nth-child(3) {
                        width: (540 / 883) * 100%;
                        line-height: 40px;
                        text-align: left;
                        padding: 20px;
                    }

                    &:nth-child(4) {
                        width: (63 / 883) * 100%;
                        border-right: none;
                    }
                }
            }
        }
    }

    .report {
        width: (1608 / 1720) * 100%;
        border-radius: 1.792px;
        background: rgba(22, 93, 255, 0.05);
        padding: 16px 24px;
        // height: 192px;

        .content {
            height: 160px;
            border-radius: 1.791px;
            border-top: 2px solid rgba(22, 93, 255, 0.5);
            border-bottom: 2px solid rgba(22, 93, 255, 0.5);
            background-color: #FFF;
            overflow: auto;

            &::-webkit-scrollbar {
                width: 6px;
            }

            &::-webkit-scrollbar-thumb {
                background: #165DFF;
                border-radius: 13px;
            }

            &>div {
                // height: 52px;
                color: #6A788D;
                font-family: "Source Han Sans CN";
                font-size: 14.325px;
                font-style: normal;
                font-weight: 500;
                padding-left: 18px;
                margin-bottom: 5px;


                .content_1 {
                    width: 44px;
                    line-height: 52px;
                }

                .content_2 {
                    width: 97%;
                    padding-right: 15px;
                    line-height: 52px;
                    // white-space: nowrap;
                    // overflow: hidden;
                    // text-overflow: ellipsis;

                    .el-icon-delete {
                        line-height: 52px;
                        font-size: 18px;
                        margin-right: 20px;

                        &:hover {
                            cursor: pointer;
                        }
                    }

                    ::v-deep .el-input {
                        width: 97%;
                    }
                }
            }
        }

        .Btns {
            margin-top: 20px;
            height: 24px;
            font-size: 14px;
            line-height: 24px;

            .edit {
                width: 68px;
                height: 24px;
                border-radius: 4px;
                margin-left: 95%;
                background: #165DFF;
                color: #FFF;
                text-align: center;
                font-weight: 700;

                &:hover {
                    cursor: pointer;
                }
            }

            .btnList {
                width: 216px;
                font-weight: 350;
                margin-left: 85%;

                &>div {
                    width: 68px;
                    height: 24px;
                    border-radius: 4px;
                    text-align: center;
                    border: 1px solid #165DFF;
                    color: rgba(22, 93, 255, 0.70);

                    &:hover {
                        cursor: pointer;
                    }

                    &:nth-child(1) {
                        background: #165DFF;
                        color: #FFF;
                        font-weight: 700;

                    }
                }
            }
        }
    }

    .measure,
    .matter {
        width: (1608 / 1720) * 100%;
        height: 470px;
        border-radius: 1.792px;
        background: rgba(22, 93, 255, 0.05);
        padding: 16px 24px;

        .Btns {
            margin-top: 8px;
            height: 24px;
            font-size: 14px;
            line-height: 24px;

            .edit {
                width: 68px;
                height: 24px;
                border-radius: 4px;
                background: #165DFF;
                color: #FFF;
                text-align: center;
                font-weight: 700;

                &:hover {
                    cursor: pointer;
                }
            }

            .btnList {
                width: 216px;
                font-weight: 350;

                &>div {
                    width: 68px;
                    height: 24px;
                    border-radius: 4px;
                    text-align: center;
                    border: 1px solid #165DFF;
                    color: rgba(22, 93, 255, 0.70);

                    &:hover {
                        cursor: pointer;
                    }

                    &:nth-child(1) {
                        background: #165DFF;
                        color: #FFF;
                        font-weight: 700;

                    }
                }
            }
        }

        .measure_1 {
            width: (320 / 1608) * 100%;
            height: 438px;
            border-top: 2px solid rgba(22, 93, 255, 0.50);
            border-bottom: 2px solid rgba(22, 93, 255, 0.50);
            background-color: #FFF;

            .treeEdit {
                margin-top: 8px;
                height: 330px;
                overflow: auto;
                padding: 0 10px;

                &::-webkit-scrollbar {
                    width: 6px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #165DFF;
                    border-radius: 13px;
                }

                ::v-deep .el-tree-node__content {
                    padding: 26px 0;
                    color: #6A788D;
                }

                ::v-deep .el-tree-node.is-current>.el-tree-node__content {
                    color: #165DFF !important;
                    font-size: 16px;
                    font-weight: 700;
                    background-color: transparent;
                }

                .treeEdit_label {
                    height: 52px;
                    line-height: 52px;

                    ::v-deep .el-input {
                        width: 75%;
                    }

                }

                .treeEdit_child {
                    height: 52px;
                    margin-left: 10px;
                    line-height: 52px;

                    ::v-deep .el-input {
                        width: 70%;
                    }
                }

                .el-icon-delete,
                .el-icon-plus {
                    line-height: 52px;
                    color: rgba(22, 93, 255, 0.50);

                    &:hover {
                        cursor: pointer;
                    }
                }
            }

            .Btns {
                .edit {
                    margin-left: 75%;
                }

                .btnList {
                    margin-left: 26%;
                }
            }


        }

        .measure_2 {
            width: (1218 / 1608) * 100%;
            height: 438px;
            border-top: 2px solid rgba(22, 93, 255, 0.50);
            border-bottom: 2px solid rgba(22, 93, 255, 0.50);
            background-color: #FFF;

            .content {
                height: 325px;
                border-radius: 1.791px;
                overflow: auto;

                &::-webkit-scrollbar {
                    width: 6px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #165DFF;
                    border-radius: 13px;
                }

                &>div {
                    height: 52px;
                    color: #6A788D;
                    font-family: "Source Han Sans CN";
                    font-size: 14.325px;
                    font-style: normal;
                    font-weight: 500;
                    padding-left: 18px;


                    .content_1 {
                        width: 44px;
                        line-height: 52px;
                    }

                    .content_2 {
                        width: 97%;
                        padding-right: 15px;
                        line-height: 52px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;

                        .el-icon-delete {
                            line-height: 52px;
                            font-size: 18px;
                            margin-right: 20px;

                            &:hover {
                                cursor: pointer;
                            }
                        }

                        ::v-deep .el-input {
                            width: 97%;
                        }
                    }
                }
            }

            .Btns {
                margin-top: 20px;

                .edit {
                    margin-left: 93%;
                }

                .btnList {
                    margin-left: 80.5%;
                }
            }
        }

        .titles {
            height: 48px;
            line-height: 48px;
            background: rgba(22, 93, 255, 0.20);
            color: #165DFF;
            font-size: 14.325px;
            font-weight: 700;
            padding-left: 18px;
        }


    }

    .matter {
        height: 378px;

        .matter_1 {
            width: (320 / 1608) * 100%;
            height: 354px;
            border-top: 2px solid rgba(22, 93, 255, 0.50);
            border-bottom: 2px solid rgba(22, 93, 255, 0.50);
            background-color: #FFF;

            .content {
                height: 255px;
                border-radius: 1.791px;
                overflow: auto;

                &::-webkit-scrollbar {
                    width: 6px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #165DFF;
                    border-radius: 13px;
                }

                &>div {
                    height: 50px;
                    color: #6A788D;
                    font-family: "Source Han Sans CN";
                    font-size: 14.325px;
                    font-style: normal;
                    font-weight: 500;
                    padding-left: 18px;
                    border-bottom: 1px solid rgba(106, 120, 141, 0.50);
                    display: flex;
                    justify-content: space-between;

                    .content_1 {
                        width: 44px;
                        line-height: 52px;
                    }

                    .content_2 {
                        width: 97%;
                        padding-right: 15px;
                        line-height: 52px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;

                        .el-icon-delete {
                            line-height: 52px;
                            font-size: 18px;
                            margin-right: 20px;

                            &:hover {
                                cursor: pointer;
                            }
                        }

                        ::v-deep .el-input {
                            width: 97%;
                        }
                    }

                    &:last-child {
                        border-bottom: none;
                    }

                    &:hover {
                        background-color: #F5F7FA;
                        cursor: pointer;
                    }
                }

                .active {
                    background-color: #F5F7FA;
                }
            }

            .Btns {
                .edit {
                    margin-left: 75%;
                }

                .btnList {
                    margin-left: 26%;
                }
            }
        }

        .matter_2 {
            width: (1218 / 1608) * 100%;
            height: 354px;
            border-top: 2px solid rgba(22, 93, 255, 0.50);
            border-bottom: 2px solid rgba(22, 93, 255, 0.50);
            background-color: #FFF;

            .content {
                height: 255px;
                border-radius: 1.791px;
                overflow: auto;

                &::-webkit-scrollbar {
                    width: 6px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #165DFF;
                    border-radius: 13px;
                }

                &>div {
                    height: 52px;
                    color: #6A788D;
                    font-family: "Source Han Sans CN";
                    font-size: 14.325px;
                    font-style: normal;
                    font-weight: 500;
                    padding-left: 18px;


                    .content_1 {
                        width: 44px;
                        line-height: 52px;
                    }

                    .content_2 {
                        width: 97%;
                        padding-right: 15px;
                        line-height: 52px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;

                        .el-icon-delete {
                            line-height: 52px;
                            font-size: 18px;
                            margin-right: 20px;

                            &:hover {
                                cursor: pointer;
                            }
                        }

                        ::v-deep .el-input {
                            width: 97%;
                        }
                    }
                }
            }

            .Btns {
                .edit {
                    margin-left: 93%;
                }

                .btnList {
                    margin-left: 80.5%;
                }
            }
        }
    }
}
</style>